<template>
  <div style="">

    <div :style="divMainClass">

      <vueWaterfallEasy @scroll="checkScroll" style=""
                        :maxCols="maxFlowCol"
                        :imgWidth="eachImgWidth"
                        :loadingTimeOut="loadingTimeOut"
                        :imgsArr="imgsArr" @scrollReachBottom="getData" ref="waterfallObj" @click="clickFn">

        <div slot-scope="props" style="color: black; padding: 0px; font-size: 12px;">
        </div>

        <div slot="waterfall-head" style="margin-left: -2px; margin-bottom: 5px;">
          <div style="overflow: hidden">
            <img :src="advertiseImg" style="width: 100%;height: 100%;"/>
          </div>

          <span style="margin: 10px 0px 5px 10px; display: block;font-size: 18px;font-weight: bold;
            font-family: PingFangSC-Medium, 'PingFang SC',sans-serif;color: #3e3e3e;">
            {{proInfo.proTitle}}
          </span>
          <span class="titleSpanClass" style="margin-left: 10px;">照片总数  <span style="font-weight: bold;">{{table.total}}</span></span>
          <span class="titleSpanClass" >访问数  <span style="font-weight: bold;">{{proInfo.accessCount}}</span></span>
        </div>

        <div slot="waterfall-over" style="font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;">没有更多啦.</div>

      </vueWaterfallEasy>

    </div>

    <a href="javascript:;" @click="backTop" v-show="backToTop"
       style=" position: fixed;bottom: 130px;right: 25px; font-size: 20px; ">
      <img src="@/assets/back-to-top.png" width="49px;" height="52px;"/>
    </a>
    <a href="javascript:;" @click="doPicRefresh"
       style=" position: fixed;bottom: 70px;right: 25px; font-size: 20px; ">
      <img src="@/assets/refresh.png" width="49px;" height="52px;"/>
    </a>
    <a href="javascript:;" @click="showQrCode"
       style=" position: fixed;bottom: 10px;right: 25px; font-size: 20px; ">
      <img src="@/assets/chat.png" width="49px;" height="52px;"/>
    </a>

    <div class="coverDiv" :style="coverStyle" >

      <div style="width:100%; height:70%; padding-top: 10px;">
        <img :src="coverImgPath" width="95%" height="100% " />
      </div>

      <div style="width:100%; height:15%; text-align: left;margin-left: 10px;margin-top: 10px;">
        <span style="font-weight: bold;font-size: 16px; font-family: PingFangSC-Medium, 'PingFang SC',sans-serif;color: #3e3e3e;">
          {{proInfo.proTitle}}</span><br/>
        <span style="font-size: 14px; margin-top: 5px;display: block;
          color: #717171; font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;">
          时间 {{proInfo.updateTime}} ～ {{proInfo.endTime}}
        </span>
      </div>

      <div style="width:100%; height:15%;">
        <div @click="closeCover"
             style="text-align: center;font-size: 21px; color: white;font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;
        background-color: #f29700; display: inline-block; width: 70%;cursor: pointer;
        padding: 5px; border-radius:16px;">
          <a >进入直播</a>
        </div>
      </div>


    </div>

    <div class="coverDiv" v-show="showQrCodeFlag" >
      <div style="text-align: center; padding-top: 150px;">
        <img src="@/assets/qrCode.png" width="200px;" height="200px; " />
      </div>
      <div style="text-align: center;font-size: 14px;color: #aaa;margin-top: 10px;
          font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;">
        长按识别图中二维码关注Live+
      </div>

      <div style="position: absolute;bottom: 40px;right: 30px;font-size: 18px;color: #aaa;
          font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;"
           @click="closeQrCodeModal">关闭</div>
    </div>

  </div>


</template>

<script>
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import wx from 'weixin-js-sdk'

  export default {
    name: 'ViewProject',
    components: {
      vueWaterfallEasy
    },
    data() {
      return {
        showCover:false,
        coverStyle:{
          // background: "",
          display :'none',
        },
        coverImgPath : "",
        currentPid: -1,
        baseUrl: process.env.BASE_URL,
        imgsArr: [],
        toPreArr: [],
        wxPreviews: [],
        wxCurrentPreviews: '',
        icon1: "",
        advertiseImg :"",
        shareTitle: "",
        shareDesc: "",
        picFlowScroll: '',
        backToTop: false,
        divMainClass: {
          height: '0px',
        },
        clientHeight: 0,

        table : {
          total : 1 ,
          current : 0 ,
          pageSize : 18 ,
        },

        loadingTimeOut : 2000,
        maxFlowCol : 3,
        eachImgWidth : 150,

        proInfo : {
          proTitle : "",
          accessCount : 0,
        },
        showQrCodeFlag : false,
      }
    },
    methods: {
      closeQrCodeModal(){
        this.showQrCodeFlag = false;
      },
      showQrCode(){
        this.showQrCodeFlag = true;
      },
      doPicRefresh(){
        let vm = this;
        vm.table.total = 1;
        vm.table.current = 0;
        vm.imgsArr = [];
        vm.toPreArr = [];
        vm.wxPreviews = [];
        vm.getData();
      },
      clickFn(event, {index, value}) {
        let vm = this;
        // 阻止a标签跳转
        event.preventDefault()
        // 只有当点击到图片时才进行操作
        if (event.target.tagName.toLowerCase() == 'img') {

         vm.wxCurrentPreviews = value.srcBig;
          wx.previewImage({
            current: vm.wxCurrentPreviews, // 当前显示图片的http链接
            urls: vm.wxPreviews  // 需要预览的图片http链接列表
          });
        }
      },
      getData() {
        let vm = this;
        if ( vm.table.current >=  vm.table.total ) {
          vm.$refs.waterfallObj.waterfallOver();
          return ;
        }

        let path = "guest/getImgsByPro2";
        vm.$http.get( path , {
            params: {
              projectId: vm.currentPid ,
              current : vm.table.current,
              pageSize : vm.table.pageSize,
            }
          }
        ).then(function (response) {

          if (response.data.result) {
            let baseUrl = vm.baseUrl;
            let imgs = response.data.imgs;
            let tmpArr = [];
            let wxArr3 = [];
            for (let imgIndex in imgs) {
              let tmpServerImg = imgs[imgIndex];
              let tmpImg = {};
              tmpImg.title = tmpServerImg.imgTitle;
              tmpImg.info = tmpServerImg.imgDesc;
              tmpImg.src = baseUrl + tmpServerImg.img2Path;
              tmpImg.srcBig = baseUrl + tmpServerImg.imgPath;
              tmpImg.href = baseUrl + tmpServerImg.img2Path;
              tmpImg.id = tmpServerImg.pid;

              tmpArr.push(tmpImg);
              wxArr3.push(baseUrl + tmpServerImg.imgPath)
            }

            vm.imgsArr = vm.imgsArr.concat(tmpArr);
            vm.wxPreviews = vm.wxPreviews.concat(wxArr3);
            vm.table.total = response.data.total;
            vm.table.current = response.data.current;

            vm.proInfo = response.data.proInfo;

            vm.shareTitle=response.data.proInfo.shareTitle;
            vm.shareDesc=response.data.proInfo.shareDesc;
            vm.proInfo = response.data.proInfo;
            vm.icon1 = baseUrl +  vm.proInfo.shareIconImg;
            // console.log( vm.proInfo );

            let proCoverImg = baseUrl +  vm.proInfo.coverImg;
            vm.initCover(proCoverImg);
            vm.advertiseImg = baseUrl +  vm.proInfo.advertiseImg;

            // if( vm.proInfo.status == 2 ){
            //   vm.showCover = false;
            //   vm.coverStyle.display = 'none';
            // }

            if( vm.table.total==0  ){
              vm.$refs.waterfallObj.waterfallOver();
            }
            if( vm.table.current >=vm.table.total ){
              setTimeout(function(){
                vm.$refs.waterfallObj.waterfallOver();
              } , 500);
            }

          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      resetImg(){
        let imgDivDoms = document.getElementsByClassName('default-card-animation');
        let imgDoms = document.getElementsByClassName('img-wraper');
        for( let i =0 ; i<imgDivDoms.length ; i++ ){
          let tmpDiv = imgDivDoms[i];
          let tmpImg = tmpDiv.getElementsByClassName('img-wraper')[0];
          tmpDiv.style.width = "100px";
          tmpImg.style.width = "100px";
          tmpImg.style.height = "100px";
        }
      },
      checkScroll(e, e1) {
        let vm = this;
        let scrollTop = this.picFlowScroll.scrollTop;
        let browserHeight = window.outerHeight;
        if (scrollTop > browserHeight) {
          this.backToTop = true
        } else {
          this.backToTop = false
        }
      },
      backTop() {
        // this.picFlowScroll.scrollTop = 0;
        let back = setInterval(() => {
          if (this.picFlowScroll.scrollTop || this.picFlowScroll.scrollTop) {
            this.picFlowScroll.scrollTop -= 100;
          } else {
            clearInterval(back);
          }
        });
      },
      wxConfig(datas){
        let vm = this;
        wx.config({
          debug: false,
          appId: datas.sign.appID , // 和获取Ticke的必须一样------必填，公众号的唯一标识
          timestamp: datas.sign.timestamp, // 必填，生成签名的时间戳
          nonceStr: datas.sign.noncestr, // 必填，生成签名的随机串
          signature:  datas.sign.signature,// 必填，签名，见附录1
          //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']
        });
        //处理验证失败的信息
        wx.error(function (res) {
          logUtil.printLog('验证失败返回的信息:', res);
        });
        //处理验证成功的信息
        wx.ready(function () {
          wx.onMenuShareAppMessage({
            title: vm.shareTitle, // 分享标题
            desc: vm.shareDesc, // 分享描述
            link: vm.shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: vm.icon1, // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function (res) {
              // 用户确认分享后执行的回调函数
              console.log("分享给朋友成功返回的信息为:" + res);
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              console.log("取消分享给朋友返回的信息为:" + res);
            }
          });
        });
      },
      getSignInfoFromServer() {
        let vm = this;
        let path = "guest/doShareSignForUrl";
        let params = new FormData();
        vm.shareLink =  window.location.href;
        params.append("shareUrl", vm.shareLink );
        vm.$http.post(path, params)
          .then(function (response) {
            if (response.data.result) {
              vm.wxConfig(response.data);
            } else {
              vm.$message.error(vm.$t('Failed'));
            }
          }).catch(function (error) {
          vm.$message.error(vm.$t('Failed'));
          console.log(error)
        });
      },
      addAccessNum(){
        let vm = this;
        let path = "guest/addAccessCount";
        vm.$http.get(path, {
            params: {
              "pid": vm.currentPid
            }
          }
        ).then(function (response) {
        });
      },
      closeCover(){
        let vm = this;
        vm.showCover = false;
        vm.coverStyle.display = 'none';
      },
      initCover( coverImgUrl ){
        let vm = this;
        if( !vm.showCover ){
          return;
        }
        // vm.coverStyle.background = "url('"+coverImgUrl+"') 0% 0% / 100% 100% no-repeat";
        if(  vm.showCover ){
          vm.coverStyle.display = 'block';
        }
        vm.coverImgPath = coverImgUrl;
        vm.showCover = false;
      }
    },
    created: function () {
      let vm = this;
      vm.currentPid = vm.$route.query.pid;
      let boolStr = vm.$route.query.showCover + "";

      if( boolStr=='true' ){
        vm.showCover = true;
      }else{
        vm.showCover = false;
      }

      vm.showCover = true;
      vm.coverStyle.display = 'none';
    },
    mounted() {
      let vm = this;
      vm.getSignInfoFromServer();
      vm.getData();
      vm.addAccessNum();

      //获得dom对象
      this.picFlowScroll = document.getElementsByClassName('vue-waterfall-easy-scroll')[0];
      this.picFlowScroll.addEventListener('scroll', this.checkScroll);
      this.clientHeight = `${document.documentElement.clientHeight}`;
      this.divMainClass.height = (this.clientHeight) + 'px';

      let clientWidth = `${document.documentElement.clientWidth}`;
      this.eachImgWidth = parseInt( (clientWidth - 21 * this.maxFlowCol ) / this.maxFlowCol ) ;
      // console.log(  this.eachImgWidth ) ;
    },
  }
</script>

<style scoped>
  .titleSpanClass {
    display: inline-block;
    margin-right: 5px;
    font-size: 15px;
    padding: 2px;
    font-size: 11px;
    color: #717171;
    font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;

  }
  .coverDiv{
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0px;
    z-index: 99;
    text-align: center;
    width : 100%;
    height: 100%;
    background-color: white;
  }
</style>
